<template>
  <div class="user-warp">
    <a-tabs v-model:activeKey="activeKey" tab-position="left">
      <a-tab-pane key="1" tab="个人信息">
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="用户账号">
            <a-input v-model:value="formState.account" disabled/>
          </a-form-item>
          <a-form-item label="用户昵称">
            <a-input v-model:value="formState.nickname"/>
          </a-form-item>
          <a-form-item label="手机号码">
            <a-input v-model:value="formState.phone"/>
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input v-model:value="formState.email"/>
          </a-form-item>
          <a-form-item label="性别">
            <a-radio-group v-model:value="formState.sex">
              <a-radio value="男">男</a-radio>
              <a-radio value="女">女</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSaveUser">保存</a-button>
            <a-button style="margin-left: 10px">取消</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="修改密码">
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="旧密码">
            <a-input v-model:value="formState.oldPassword"/>
          </a-form-item>
          <a-form-item label="新密码">
            <a-input v-model:value="formState.newPassword"/>
          </a-form-item>
          <a-form-item label="确认密码">
            <a-input v-model:value="formState.confirmPassword"/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">保存</a-button>
            <a-button style="margin-left: 10px">取消</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="3" tab="我的订单">
        <order/>
      </a-tab-pane>
      <a-tab-pane key="4" tab="收货地址" force-render>
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="联系人">
            <a-input v-model:value="formState.contacts"/>
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model:value="formState.contactsPhone"/>
          </a-form-item>
          <a-form-item label="详细地址">
            <a-textarea v-model:value="formState.address"/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSaveUser">保存</a-button>
            <a-button style="margin-left: 10px">取消</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
import {ref, reactive, toRaw, onMounted} from 'vue';
import Order from './order.vue'
import axios from "axios";
import {message} from "ant-design-vue";
import router from "@/router";

const activeKey = ref('1');

const formState = ref({
  nickname: '',
  phone: '',
  email: '',
  sex: '',
  contacts: '',
  contactsPhone: '',
  address: '',
});
const onSaveUser = async () => {
  const {data} = await axios.put('http://localhost:9763/system/member', {...formState.value})
  if (data.code == 200) {
    message.success('修改成功!');
    getDetails(formState.value.id)
  } else {
    message.error('修改失败!');
  }
};


const onSubmit = async () => {
  const newPwd = formState.value.newPassword
  const oldPwd = formState.value.oldPassword
  if (newPwd != formState.value.confirmPassword) {
    message.error('两次输入的密码不一致!');
    return false
  }

  const {data} = await axios.put('http://localhost:9763/system/member/editPwd', {password: oldPwd, newPwd})
  if (data.code == 200) {
    message.success('修改成功!');
    getDetails(formState.value.id)
  } else {
    message.error('修改失败!');
  }
}

const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};

const getDetails = async (id) => {
  const {data} = await axios.get('http://localhost:9763/system/member/' + id)
  formState.value = {...data.data}
  console.log(formState)
}


onMounted(() => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (userInfo) {
    getDetails(userInfo.id)
  } else {
    router.push({name: 'Login'})
  }

})
</script>

<style scoped>
.user-warp {
  min-height: 70vh;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
}
</style>
